<template>
	<view class="back">
		<view class="header">
			<view class="line"></view>
			<view class="money">
				<view class="buy">买入金额</view>
				<view class="number">
					<input class="txt1" type="text" :placeholder="option.buyMin+'元起购'" v-model="money" />
				</view>
				<view class="num">
					<text class="tex1">{{title.mon}}月{{title.day}}日</text>
					<text class="tex2">确认份额，开始计算收益</text>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="wayBox">
				<view class="lineLeft"></view>
				<view class="wayText">
					<text>只需三步即可赚取收益</text>
				</view>
				<view class="lineRight"></view>
			</view>
			<view class="phone">
				<view class="border">
					<image src="https://z3.ax1x.com/2021/04/23/cXdoCQ.png" mode=""></image>
					<view class="">风险测评</view>
				</view>
				<view class="border">
					<image src="https://z3.ax1x.com/2021/04/23/cXdT3j.png" mode=""></image>
					<view class="">绑定银行卡</view>
				</view>
				<view class="border">
					<image src="https://z3.ax1x.com/2021/04/23/cXd54g.png" mode=""></image>
					<view class="">上传身份证</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="argeement">
				<checkbox-group class="check" @change="checkboxChange">
					<checkbox :checked="isChecked" style="transform:scale(0.6)" />
				</checkbox-group>
				<view class="tet">
					基金销售服务由宇宁基金提供，本人已阅读并同意该产品的基金合同，招募说明书，产品规则，信息披露材料及相关协议，充分了解产品的风险特性，并自愿承担相关投资风险。
				</view>
			</view>
			
			<!-- 跳转支付方式 -->
			<button type="default" @click="bankcard">立即购买</button> 
			
			
			<view :hidden="userFeedbackHidden" class="popup_content">
				<view class="popup_title">风险测评</view>
				<view class="popup_textarea_item">
					<textarea class="popup_textarea" placeholder='根据相关规定我们需要先对您做一个简短的测评来验证你是否能承担投资风险'
						v-model="feedbackContent">
			 				</textarea>
					<view @click="submitFeedback()">
						<button class="popup_button" @click="evaluation">开始测评</button>
					</view>
				</view>
			</view>
			<view class="popup_overlay" :hidden="userFeedbackHidden" @click="hideDiv()"></view>

		</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex"
	const {
		mapActions,
		mapState,
		mapMutations
	} = createNamespacedHelpers(
		"current"
	);
	const {
		mapState:mapStates
	} = createNamespacedHelpers(
		"UserInfor"
	);
	const {
		mapState:mapState3 
	} = createNamespacedHelpers("details");
	export default {
		data() {
			return {
				//定义是什么产品
				chanping:'',
				//接收上个页面参数
				option:{},
				title: {
					year:'2021',
					mon:'03',
					day:'15'
				}, //当天日期
				isok: true,
				userFeedbackHidden: true, // 默认隐藏
				feedbackContent: '', // 用户反馈内容
				isChecked: false, //单个复选框是否选中
				money: '', //买入金额
				minMoney: ''
			}
		},
		onLoad(option){
		console.log(option);
				this.GetTime()
				this.option=option	
				this.chanping=option.chanping
		},
		computed:{
			...mapStates(['userData'])
		},
		methods: {
			...mapMutations(['moneys']),
			//获取当天日期，确定份额
			GetTime() {
				var date = new Date();
				var base = Date.parse(date); // 转换为时间戳
				var year = date.getFullYear(); //获取当前年份
				var mon = date.getMonth() + 1; //获取当前月份
				var day = date.getDate(); //获取当前日
				var oneDay = 24 * 3600 * 1000
				this.title.mon = `${mon >= 10 ? mon : '0' + mon}`
				this.title.day = `${day >= 10 ? day : '0' + day}`; //今日时间
			},
			//如果没有风险测评
			showDiv() { // 显示输入弹出框
				this.userFeedbackHidden = false;
			},
			
			hideDiv() { // 隐藏输入弹出框
				this.userFeedbackHidden = true;
			},
			submitFeedback() { // 提交反馈
				this.userFeedbackHidden = true
				var _this = this;
				// 提交反馈内容
				console.log(_this.feedbackContent);
			},
			//风险测评跳转
			evaluation(){
				uni.navigateTo({
					url:"../evaluation/academic"
				})
			},
			//单个复选框是否选中
			checkboxChange(){
				this.isChecked=true
			},
			
			//跳转支付方式银行卡（暂时没做判断）
			bankcard(){
				if(this.userData.idcard){   //判断是否身份认证
					if(this.userData.acceptRisk!==0){
						// console.log('已风险测评');
						if(this.isChecked && this.money-0>=this.option.buyMin){
							//给状态机里面的买入金额重新赋值
							this.moneys(this.money)
							uni.navigateTo({
								url:'../bankcard/bankcard?chanping='+this.chanping
							})
							this.isChecked=false
						}else if(this.money && this.money-0<this.option.buyMin){
							uni.showToast({
								title: "最低购买金额"+this.option.buyMin+"元",
								duration: 2000,
								icon:"none"
							})
						}
						else if(!this.isChecked){
							uni.showToast({
								title: '请阅读相关协议',
								duration: 2000,
								icon:"none"
							})
						}
						else{
							uni.showToast({
								title: '请输入购买金额',
								duration: 2000,
								icon:"none"
							})
							
						}
					}else{
						//如果没有风险测评
						this.showDiv() 
					}
					
				}else{
					uni.showToast({
						title: '您还未认证，请先身份认证',
						duration: 2000,
						icon:"none"},
					//如果没有跳转身份认证
					uni.navigateTo({
						url:"../IdentAuthen/IdentAuthen"
					}))
				}
			},
			
		}
	}
</script>

<style>
	.back {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.header .line {
		height: 0rpx;
		border: 1rpx solid #000000;
		opacity: 0.03;
	}

	.header .money {
		height: 292rpx;
		padding: 24rpx;
	}

	.header .money .buy {
		margin-top: 20rpx;
		font-size: 28rpx;
		font-weight: 400rpx;
		color: #999999;
	}

	.header .money .number {
		/* width: 230rpx; */
		margin-top: 50rpx;
		display: flex;
		border-bottom: 5rpx solid rgba(3, 3, 3, 0.03);
		color: #CCCCCC;
	}

	.header .money .number .txt1 {
		/* width: 230rpx; */
		height: 50rpx;
		font-size: 48rpx;
	}

	.header .money .num {
		margin-top: 40rpx;
		height: 86rpx;
		line-height: 86rpx;
		background: rgba(255, 120, 70, 0.1);
		border-radius: 4rpx;
		font-size: 28rpx;
	}

	.header .money .num .tex1 {
		margin-left: 24rpx;
		color: #FFC364;
		font-weight: 400;
	}

	.header .money .num .tex2 {
		color: #666666;
		font-weight: 400;
	}

	.content {
		/* border: 1px solid red; */
		flex: 1 1 0;
		background-color: #f5f5f5;
	}

	.footer button {
		height: 88rpx;
		background: #3476F1;
		color: white;
	}

	.footer .argeement {
		background-color: #f5f5f5;
		display: flex;
		padding: 20rpx;
	}

	.footer .argeement .tet {
		width: 658rpx;
		height: 102rpx;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 34rpx;
		color: #666666;
		opacity: 1;
	}

	.content .wayBox {
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.content .lineLeft {
		width: 79px;
		height: 1px;
		background: linear-gradient(270deg, #A6A6A6 0%, #FFFFFF 100%);
		opacity: 1;
	}

	.content .lineRight {
		width: 79px;
		height: 1px;
		background: linear-gradient(270deg, #FFFFFF 0%, #A6A6A6 100%);
		opacity: 1;
	}

	.content .wayText {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #A6A6A6;
		margin: 0 20rpx 0 20rpx;
	}

	.content .phone {
		display: flex;
		width: 620rpx;
		height: 100rpx;
		margin: 50rpx auto;
		/* border: 1px solid blue; */
		justify-content: space-between;
	}

	.content .phone .border {
		width: 160rpx;
		height: 100rpx;
		/* border: 1px solid #4CD964; */
		text-align: center;
	}

	.content .phone .border image {
		width: 92rpx;
		height: 60rpx;
	}

	.content .phone .border view {
		font-size: 24rpx;
		color: #666666;
	}

	.box {
		height: 1200rpx;
		width: 750rpx;
		background-color: #4CD964;
	}

	.popup_overlay {

		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index: 1001;
		-moz-opacity: 0.8;
		opacity: .80;
		filter: alpha(opacity=88);
	}

	.popup_content {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 520upx;
		height: 550upx;
		margin-left: -270upx;
		margin-top: -270upx;
		border: 10px solid white;
		background-color: white;
		z-index: 1002;
		overflow: auto;
		border-radius: 20upx;
	}

	.popup_title {
		padding-top: 20upx;
		width: 480upx;
		text-align: center;
		font-size: 32upx;
	}

	.popup_textarea_item {
		padding-top: 5upx;
		height: 240upx;
		width: 440upx;
		background-color: #F1F1F1;
		margin-top: 30upx;
		margin-left: 20upx;
	}

	.popup_textarea {
		width: 410upx;
		font-size: 26upx;
		margin-left: 20upx;
	}

	.popup_button {
		color: white;
		background-color: #4399FC;
		border-radius: 20upx;
	}
</style>
